<template>
	<view class="complaint">
		<view class="complaint-top">投诉建议内容</view>
		<view class="complaint-add-content">
			<view class="complaint-add-content-item">
				<view>
					<image
						src="https://cdn7.axureshop.com/demo/1996612/images/%E6%8A%95%E8%AF%89%E5%BB%BA%E8%AE%AE/u7487.svg"
						mode="scaleToFill" />
					<text style="font-size: 28rpx;">业主问题</text>
				</view>
				<view style="color: #d9001e;">待处理</view>
			</view>

			<view class="complaint-add-content-itemLi">
				<view class="complaint-add-itemLi">
					<view>
						<text class="fonColor">投诉建议地点</text>
					</view>
					<view>花园国际小区</view>
				</view>
				<view class="complaint-add-itemLi">
					<view>
						<text class="fonColor">投诉建议时间</text>
					</view>
					<view>2022-02-28 12：33：15</view>
				</view>
			</view>

			<view class="complaint-add-content-itemLi">
				<view class="complaint-add-itemLi">
					<view>
						<text class="fonColor">投诉人</text>
					</view>
					<view>张三</view>
				</view>
				<view class="complaint-add-itemLi">
					<view>
						<text class="fonColor">投诉人电话</text>
					</view>
					<view>18999999999</view>
				</view>
			</view>

			<view class="complaint-add-content-button">
				<view class="complaint-add-content-button-item">
					投诉建议内容
				</view>
				<view>每天早上5点多，楼下遛狗人多，叫声影响大家睡觉，希望物业贴告示，让养狗业主注意。</view>
				<view class="complaint-add-content-button-img">
					<image
						src="https://cdn7.axureshop.com/demo/1996612/images/%E6%8A%95%E8%AF%89%E5%BB%BA%E8%AE%AE/u7539.svg"
						mode="scaleToFill" />
					<image
						src="https://cdn7.axureshop.com/demo/1996612/images/%E6%8A%95%E8%AF%89%E5%BB%BA%E8%AE%AE/u7539.svg"
						mode="scaleToFill" />
				</view>
			</view>

		</view>
		<view class="complaint-top">处理进度条</view>
		<view class="complaint-add-steps">
			<up-steps current="1" direction="column">
				<up-steps-item title="2022-02-28 12:33:15" desc="张三">
				</up-steps-item>
				<up-steps-item title="已出库" desc="10:35">
				</up-steps-item>
			</up-steps>
		</view>
		<view class="add_suggest_btn" @click="shadeAdd">催办</view>
		<view class="add_suggest_btn ggg" @click="navigateBack">返回</view>
		<!-- 遮罩层 -->
		<up-overlay :show="shade">
		</up-overlay>
	</view>
</template>

<script setup>
// #d9001e
import { ref } from 'vue';

// 使用 ref 创建响应式数据  
let shade = ref(false)
// 创建响应式数据  
const status = ref('loadmore');
let shadeAdd = () => {
	status.value = 'loading';
	shade.value = true;
	uni.showLoading({
		title: '正在提交，请稍后',
		mask: true
	});
	setTimeout(() => {
		shade.value = false;
		uni.hideLoading();
		// navigateBack()
		uni.showToast({
			title: '提交成功',
			duration: 1000
		});
		setTimeout(() => {
			navigateBack()
		}, 1000)

	}, 2000);
}

let navigateBack = () => {
	uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.complaint {
	min-height: calc(100vh - 88rpx);
	padding: 0 30rpx;
	box-sizing: border-box;
	background-color: #f5f5f5;
	font-family: '微软雅黑', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 24rpx;
}

.complaint-top {
	line-height: 80rpx;
	height: 80rpx;
	font-size: 28rpx;
	font-weight: 600;

}

.complaint-add-content {
	margin-top: 20rpx;
	background-color: #fff;
	border: #f5f5f5 1rpx solid;
	box-shadow: 0 0 20rpx 3rpx #ccc;
	padding: 20rpx;
	box-sizing: border-box;

	.complaint-add-content-item {
		display: flex;
		height: 60rpx;
		line-height: 60rpx;
		justify-content: space-between;
		border-bottom: #dbdbdb 0.3rpx solid;

		image {
			margin-top: -10rpx;
			width: 60rpx;
			height: 60rpx;
			vertical-align: middle;
		}
	}

	.complaint-add-content-itemLi {
		padding: 10rpx 0;
		border-bottom: #dbdbdb 0.3rpx solid;

		.complaint-add-itemLi {
			display: flex;
			height: 60rpx;
			line-height: 60rpx;
			justify-content: space-between;
		}
	}

	.complaint-add-content-button {
		.complaint-add-content-button-item {
			height: 60rpx;
			line-height: 60rpx;
			color: #898989;
		}

		.complaint-add-content-button-img {
			margin-top: 20rpx;
			width: 100%;
			display: flex;

			image {
				width: 150rpx;
				height: 150rpx;
				margin-right: 20rpx;
			}
		}
	}

}

.complaint-add-steps {
	background-color: #fff;
	padding: 20rpx;

}

.add_suggest_btn {
	margin-top: 30rpx !important;
	height: 68rpx;
	line-height: 68rpx;
	text-align: center;
	color: #fff;
	width: 98%;
	margin: 20rpx auto;
	background-color: #02a7f0;
	border-radius: 30rpx;
}
.ggg {
	background-color: #c5c5c5 !important;
}

.fonColor {
	color: #898989;
}
</style>
